<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="24">
				<el-col :span="24">
					<el-form :inline="true" :model="params" ref="params" class="demo-form-inline sarchForm" size="small"
						@submit.native.prevent>
						<el-form-item label="征集名称">
							<el-input @keyup.enter.native="handleSubmit" v-model="params.headline"
								placeholder="征集名称"></el-input>
						</el-form-item>
						<el-form-item label="状态">
							<el-select v-model="params.checkafcd" placeholder="审核状态">
								<el-option label="待审核" value="0"></el-option>
								<el-option label="已通过" value="1"></el-option>
								<el-option label="审核驳回" value="2"></el-option>
								<el-option label="下架" value="3"></el-option>
								<el-option label="草稿" value="4"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="handleSubmit">查询</el-button>
							<el-button @click="handleReset">重置</el-button>
							<el-button @click="handleAdd('add', cateInfo)" type="primary"
								icon="el-icon-plus">新增</el-button>
							<el-button size="small" @click="batchDelete()" plain type="danger">批量删除</el-button>
						</el-form-item>
						<el-form-item>
							<!-- <el-button size="small" @click="batchTransfer()" plain type="success">批量转移</el-button> -->
						</el-form-item>
					</el-form>
					
					<el-table v-loading="loading" :row-key="getKey" :data="newData" style="width: 100%"
						:header-cell-style="{ background: '#f0f2f5' }" ref="tableRef" @selection-change="changeSelect">
						<el-table-column type="selection" width="55" reserve-selection :selectable="judgeSelect">
						</el-table-column>
						<el-table-column label="序号" width="48" type="index"></el-table-column>
						<el-table-column prop="headline" width="200" label="征集标题" show-overflow-tooltip>
							<template slot-scope="scope">
								<span class="nameHover" @click="handleDetail(scope.row.id)">{{scope.row.headline}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="applicableTargets1" label="适用行业" width="150" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="settleMatter" label="征集描述" width="150" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="expectedEffect" label="征集要求" width="150" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="checkafcd" label="状态" width="90">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.checkafcd === '0'" type="warning">待审核</el-tag>
								<el-tag v-if="scope.row.checkafcd === '1'" type="success">已通过</el-tag>
								<el-tag v-if="scope.row.checkafcd === '2'" type="danger">审核驳回</el-tag>
								<el-tag v-if="scope.row.checkafcd === '3'" type="info">下架</el-tag>
								<el-tag v-if="scope.row.checkafcd === '4'">草稿</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="collectionTimeStart" label="征集开始时间" width="150" show-overflow-tooltip>
							<template slot-scope="scope">
								<span>{{scope.row.collectionTimeStart.slice(0,10)}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="collectionTimeEnd" label="征集结束时间" width="150" show-overflow-tooltip>
							<template slot-scope="scope">
								<span>{{scope.row.collectionTimeEnd.slice(0,10)}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="contactRen" label="联系人" width="150" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="contactPhone" label="联系电话" width="150" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="createTime" width="170" label="创建时间" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="updateTime" label="更新时间" width="170" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="reason" label="审核意见" show-overflow-tooltip>
						    <template slot-scope="scope">
						        <span v-if="scope.row.checkafcd === '2'">{{ scope.row.reason }}</span>
						    </template>
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="220" align="center">
							<template slot-scope="scope">
								<el-button
									:disabled="scope.row.checkafcd === '1' || scope.row.checkafcd === '2' || scope.row.checkafcd === '0'"
									@click="handleEdit('edit', cateInfo, scope.row)" type="text"
									size="small">编辑</el-button>
								<el-button
									:disabled="scope.row.checkafcd === '1' || scope.row.checkafcd === '2'|| scope.row.checkafcd === '0'"
									@click="hanldeDelete(scope.row.id)" type="text" size="small">删除</el-button>
								<el-button
									:disabled="scope.row.checkafcd === '1' || scope.row.checkafcd === '2' || scope.row.checkafcd === '3' || scope.row.checkafcd === '0'"
									@click="handleSend(scope.row)" type="text" size="small">提交</el-button>
								<el-button
									:disabled="scope.row.checkafcd === '0' || scope.row.checkafcd === '2' || scope.row.checkafcd === '3'|| scope.row.checkafcd === '4'"
									@click="handleLower(scope.row)" type="text" size="small">下架</el-button>
								<el-button v-if="cateInfo.cateName === '高新优品'"
									@click="handleaDetail(scope.row.id, cateInfo.cateName)" type="text"
									size="small">详情</el-button>
								<el-button v-if="cateInfo.cateName !== '高新优品'" @click="handleDetail(scope.row.id)"
									type="text" size="small">详情</el-button>
							</template>
						</el-table-column>
						
						
						
					</el-table>
					<!-- 分页 -->
					<div class="poolPage">
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="params.page" :page-sizes="[10, 20, 30]" :page-size="params.pageSize"
							layout="total, sizes, prev, pager, next, jumper" :total="total">
						</el-pagination>
					</div>
				</el-col>
			</el-col>
		</el-row>
		<!-- 新增资讯 -->
		<NewDialog @getNewList="getNewList" ref="newCon" />
		<!-- 详情 -->
		<!-- <RenovationDetail ref="detailContent" /> -->
		<el-dialog title="选择栏目" :visible.sync="dialogVisible" width="30%">
			<div class="treeWrapper">
				<el-tree ref="tree" class="treeRadio" default-expand-all :props="defaultPropsSelect" :data="dataTree"
					show-checkbox check-strictly node-key="id" @check="handleClick" @check-change="handleClickChange" />
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleTo()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import {
		getColumnTree2,
		getColumnList,
		getNewDelete,
		getNewOptions,
		getNewDetail,
		transferNews
	} from "@/request/api/new";
	import NewDialog from "./dialogCollect.vue";
	import {
		myCollectList,//我的征集
		planCollectDelete,
		planCollectAudit,
		getKey
	} from "@/request/api/planPromotion";

	export default {
		components: {
			NewDialog,
		},
		data() {
			return {
				dataTree: [{
					name: '机构方案',
					id: 1
				}, {
					name: '专家文章',
					id: 2
				}],
				defaultProps: {
					children: "children",
					label: "name",
				},
				defaultPropsSelect: {
					children: "children",
					label: "name",
				},
				selectCate: {
					checkStrictly: true,
					label: "name",
					children: "children",
					value: "id",
					getCheckedNodes: true,
					expandTrigger: "hover",
				},
				isEdit: false,
				loading: false,
				params: {
					page: 1,
					pageSize: 10,
					createBy: "",
					headline: "", //标题
					checkafcd: "", //状态
				},
				newData: [],
				cateInfo: {
					cateId: "1", //栏目id
					cateName: "我的征集", //栏目名称
				},
				total: 0,
				multipleSelection: [], //批量选择
				dialogVisible: false,
			};
		},
		created() {
			if (window.sessionStorage.getItem("userInfo") !== null) {
			  let userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
			  this.params.createBy = userInfo.id
			}
			// this.getTypeTree();
			this.getNewList();
			// this.getNewList(this.cateInfo.cateId
		},
		methods: {
			// 获取产品类型树
			getTypeTree() {
				getColumnTree2().then((res) => {
					if (res.data.code === 200) {
						this.loading = false;
						this.dataTree = res.data.result;
					}
				});
			},
			// 父级
			selectValue() {
				this.$refs.cascader.dropDownVisible = false;
			},
			// 查看详情
			handleDetail(id) {
				let url = this.$router.resolve({
					name: "planCollectDetail",
					query: {
						id,
						menuIndex: 3
					},
				});
				window.open(url.href, "_blank");
			},

			handleaDetail(id, name) {
				let url = this.$router.resolve({
					name: "planPromotionDetail",
					query: {
						id,
						menuIndex: 3
					},
				});
				window.open(url.href, "_blank");
			},
			// 点击左侧树获取信息
			handleNodeClick(data) {
				if (data.children) {
					this.$message({
						message: "不可选择父级栏目进行新增资讯！",
						type: "warning",
					});
					this.cateInfo.cateId = "";
					this.cateInfo.cateName = "";
					this.params.schemeType = "";
				} else {
					this.cateInfo.cateId = data.id;
					this.cateInfo.cateName = data.name;
					this.params.schemeType = data.id;
					this.getNewList(data.id);
				}
			},
			// 点击一级标签
			handleLargeTabClick(tab){
				this.params.tab = tab.name;
			},
			// 点击二级标签
			handleTabClick(tab) {
				// console.log('tab',tab)
				this.cateInfo.cateId = tab.name;
				this.params.schemeType = tab.name;
			    if (tab.name === '1') {
					this.cateInfo.cateName = '机构方案';
			    } else if (tab.name === '2') {
			        this.cateInfo.cateName = '专家文章';
			    }
				this.getNewList()
			},
			// 获取新闻列表
			getNewList() {
				this.newData =[]
				this.loading = true
				myCollectList(this.params).then((res) => {
					this.loading = false
					if (res.data.code === 200) {
						let newData = res.data.result.items;
						this.total = res.data.result.total;
						
						getKey('applicable_industry').then(res => {
							if (res.data.code === 200) {
								let list = res.data.result.items
								newData.map((item)=>{
									list.map((item2)=>{
										if(item.applicableTargets && item.applicableTargets==item2.value){
											item.applicableTargets1 = item2.label
										}
									})
								})
								this.newData = newData
							}
						})
					}
				});
			},
			// 新增资讯
			handleAdd(type, cateInfo) {
				if (this.cateInfo.cateId !== '') {
					this.$refs.newCon.open(type, cateInfo);
				} else {
					this.$message({
						message: "请选择栏目！",
						type: "warning",
					});
				}
			},
			// 编辑
			handleEdit(type, cateInfo, info) {
				this.$refs.newCon.open(type, cateInfo, info);
			},
			// 删除
			hanldeDelete(id) {
				this.$confirm("确定删除该条信息吗?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.getDelete(id);
				});
			},
			// 删除接口
			getDelete(id) {
				planCollectDelete(id).then((res) => {
					if (res.data.code === 200) {
						this.$message({
							message: res.data.message,
							type: "success",
						});
						this.getNewList();
						this.$refs.tableRef.clearSelection();
					} else {
						this.$message.error(res.data.message);
					}
				});
			},
			// 选择左侧复选框
			changeSelect(val) {
				this.multipleSelection = val;
			},
			getKey(row) {
				return row.id;
			},
			// 批量删除
			batchDelete() {
				if (this.multipleSelection.length === 0) {
					this.$message({
						message: "请选择数据！",
						type: "warning",
					});
					return false;
				}
				this.$confirm("确定删除吗?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					var ids = this.multipleSelection.map((item) => item.id);
					this.getDelete(ids);
				});
			},
			// 查询
			handleSubmit() {
				this.params.page = 1;
				this.getNewList(this.cateInfo.cateId);
			},
			// 重置
			handleReset() {
				this.params.page = 1;
				this.params.headline = null;
				this.params.checkafcd = null;
				this.getNewList(this.cateInfo.cateId);
			},
			handleSizeChange(val) {
				this.params.pageSize = val;
				this.params.page = 1;
				this.getNewList(this.cateInfo.cateId);
			},
			handleCurrentChange(val) {
				this.params.page = val;
				this.getNewList(this.cateInfo.cateId);
			},
			// 提交
			handleSend(info) {
				this.$confirm("确定提交审核吗?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.getAdd({
						id: info.id,
						checkafcd: 0
					});
				});
			},
			// 下架
			handleLower(info) {
				this.$confirm("确定下架该资讯吗?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.getAdd({
						id: info.id,
						checkafcd: 3
					});
				});
			},
			// 修改接口
			getAdd(params) {
				planCollectAudit(params).then((res) => {
					if (res.data.code === 200) {
						this.$message({
							message: res.data.message,
							type: "success",
						});
						// this.dialogVisible = false
						this.getNewList();
					} else {
						this.$message.error(res.data.message);
					}
				});
			},
			// 判断表格每一行的 CheckBox 是否可以勾选
			judgeSelect(row, index) {
				return row.checkafcd == "1" || row.checkafcd == "2" || row.checkafcd == "3" || row.checkafcd == "4"; // 返回true该行可选，返回false则不可选
			},
			// 批量转移
			batchTransfer() {
				if (this.multipleSelection.length === 0) {
					this.$message({
						message: "请选择数据！",
						type: "warning",
					});
					return false;
				}
				this.dialogVisible = true;
				this.$refs.tree.setCheckedKeys([]);
			},
			handleClickChange(data, check, childCheck) {
				if (check) {
					this.$refs.tree.setCheckedNodes([data]); // 选中已选中节点
				}
			},
			handleClick(data, tree) {
				this.$refs.tree.setCheckedKeys([]); // 删除所有选中节点
				this.$refs.tree.setCheckedNodes([data]); // 选中已选中节点
			},
			// 转移栏目-点击确定
			handleTo() {
				var columnData = this.$refs.tree.getCheckedNodes();
				if (columnData.length === 0) {
					this.$message({
						message: '请选择栏目！',
						type: 'warning'
					});
					return false;
				} else {
					var newData = []
					this.multipleSelection.forEach(item => {
						newData.push({
							id: item.id, //资讯id
							ntCtgId: columnData[0].id, //栏目id
							columnName: columnData[0].name //栏目名称
						})
					})
					transferNews(newData).then(res => {
						if (res.data.code === 200) {
							this.$message({
								message: res.data.message,
								type: "success",
							});
							this.dialogVisible = false
							this.getNewList();
							this.$refs.tableRef.clearSelection();
						} else {
							this.$message.error(res.data.message);
						}
					})
				}

			}
		},
	};
</script>
<style lang="less" scoped>
	.el-card {
		overflow-y: auto;
		height: 830px;
	}

	.bigBtn {
		width: 140px;
	}

	.tree_icon {
		color: #67c23a;
	}

	.poolPage {
		margin-top: 15px;
		text-align: right;
	}

	/deep/.treeRadio .el-checkbox__inner {
		border-radius: 50%;
	}

	/deep/ .el-tree {
		// padding-top: 15px;
		// padding-left: 10px;

		// 不可全选样式
		.el-tree-node {
			margin-bottom: 5px;

			.is-leaf+.el-checkbox .el-checkbox__inner {
				display: inline-block;
			}

			.el-checkbox .el-checkbox__inner {
				display: none;
			}
		}
	}

	.treeWrapper {
		height: 600px;
		overflow-y: auto;
	}
	.nameHover:hover{
		cursor: pointer;
		color: #409EFF;
	}
</style>